<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="70"
          class="search-form"
          @submit.native.prevent
        >
          <Form-item label="手机号" prop="mobile">
            <Input
              type="text"
              v-model="searchForm.mobile"
              placeholder="请输入手机号"
              :maxlength="11"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="审核状态" prop="status">
            <Select
              v-model="searchForm.status"
              placeholder="请选择"
              clearable
              style="width: 200px"
            >
              <Option v-for="(item, k) in statusList" :key="k" :value="item.value">{{
                item.label
              }}</Option>
            </Select>
          </Form-item>
          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
        </Form>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.page"
          :total="total"
          :page-size="searchForm.rows"
          @on-change="changePage"
          @on-page-size-change="changerows"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>

    <!-- 查看模态框 -->
    <Modal v-model="detailFlag" :title="detailRow.title" :width="1000">
      <div v-if="detailRow" class="modal-info">
        <p>基本信息</p>
        <div class="modal-row">
          <div>审核状态：</div>
          <div>{{ detailRow.status }}</div>
        </div>
        <div class="modal-row">
          <div>姓名：</div>
          <div>{{ detailRow.realName }}</div>
        </div>
        <div class="modal-row">
          <div>手机号：</div>
          <div>{{ detailRow.mobile }}</div>
        </div>
        <div class="modal-row">
          <div>身份证：</div>
          <div>{{ detailRow.idCard }}</div>
        </div>
        <p>服务信息</p>
        <div class="modal-row">
          <div>在线咨询价格：</div>
          <div>{{ detailRow.consultPrice }}元</div>
        </div>
        <div class="modal-row">
          <div>线下预约价格：</div>
          <div>{{ detailRow.registerPrice }}元</div>
        </div>
        <p>坐班信息</p>
        <div v-for="(i, k) in detailRow.list" :key="k">
          <div class="modal-row">
            <div>场地：</div>
            <div>{{ i.siteName }}</div>
          </div>
          <div class="modal-row">
            <div>工作室：</div>
            <div>{{ i.siteRoomName }}</div>
          </div>
          <div class="modal-row">
            <div>坐班时段：</div>
            <div>
              <Table
                border
                :columns="weeks"
                small="small"
                :data="i.times"
                ref="table1"
              ></Table>
            </div>
          </div>
          <!-- <div v-if="k != detailRow.yardList.length - 1" class="divider"></div> -->
        </div>
      </div>
      <div slot="footer">
        <Button type="success" v-if="detailRow.status == '待审核'" @click="approved"
          >通过</Button
        >
        <Button type="error" v-if="detailRow.status == '待审核'" @click="refuse"
          >不通过</Button
        >
        <Button
          type="error"
          v-if="detailRow.status != '待审核' && registerFlag == 1"
          @click="offService('down')"
          >关闭线下服务</Button
        >
        <Button
          type="warning"
          v-if="detailRow.status != '待审核' && consultFlag == 1"
          @click="offService('on')"
          >关闭线上服务</Button
        >
        <Button v-if="detailRow.status" @click="detailFlag = false">关闭</Button>
      </div>
    </Modal>
    <Modal v-model="refuseFlag" title="审核拒绝">
      <div>
        <Input
          type="textarea"
          v-model="remarks"
          :rows="6"
          placeholder="请输入拒绝原因"
          clearable
        />
      </div>
      <div slot="footer">
        <Button type="text" @click="refuseFlag = false">关闭</Button>
        <Button type="primary" @click="submitRefuse">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as API_Consult from "@/api/consult.js";

export default {
  name: "examine",
  data() {
    return {
      loading: false, // 加载状态
      searchForm: {
        // 请求参数
        page: 1,
        rows: 10,
        mobile: null, //手机号
        status: null, //审核状态
      },
      statusList: [
        // 审核状态列表
        { value: 0, label: "待审核" },
        { value: 1, label: "通过" },
        { value: 2, label: "不通过" },
      ],
      detailFlag: false, // 审核、详情弹窗
      columns: [
        {
          title: "姓名",
          tooltip: true,
          minWidth: 120,
          render: (h, params) => {
            return h("div", [h("span", {}, params.row.dto.realName)]);
          },
        },
        {
          title: "身份证号",
          tooltip: true,
          minWidth: 180,
          render: (h, params) => {
            return h("div", [h("span", {}, params.row.dto.idCard)]);
          },
        },
        {
          title: "手机号",
          tooltip: true,
          minWidth: 120,
          render: (h, params) => {
            return h("div", [h("span", {}, params.row.dto.mobile)]);
          },
        },
        {
          title: "在线咨询价格（元）",
          tooltip: true,
          minWidth: 120,
          render: (h, params) => {
            return h("div", [h("span", {}, params.row.dto.consultPrice)]);
          },
        },
        {
          title: "线下预约价格（元）",
          tooltip: true,
          minWidth: 120,
          render: (h, params) => {
            return h("div", [h("span", {}, params.row.dto.registerPrice)]);
          },
        },
        { title: "申请时间", key: "createTime", minWidth: 180, tooltip: true },
        {
          title: "审核状态",
          minWidth: 120,
          render: (h, params) => {
            let label = "待审核";
            if (params.row.status == 1) label = "通过";
            if (params.row.status == 2) label = "不通过";
            return h("div", [
              h(
                "span",
                { style: { color: params.row.status == 0 ? "#FF5C58" : "#555555" } },
                label
              ),
            ]);
          },
        },
        {
          title: "操作",
          align: "center",
          width: 200,
          fixed: "right",
          render: (h, params) => {
            let func = [];
            if (params.row.status == 0) {
              func.push(this.btnDom(h, "warning", "审核", "handleView", params));
            } else {
              func.push(this.btnDom(h, "error", "详情", "handleView", params, true));
            }
            return h("div", {}, func);
          },
        },
      ],
      weeks: [
        {
          title: "时间/星期",
          align: "center",
          width: 120,
          render: (h, params) => {
            return h("div", {}, [h("span", {}, params.row.timeSlot)]);
          },
        },
        {
          title: "星期一",
          align: "center",
          render: (h, params) => {
            let label = params.row.times[0].count;
            return h("div", { style: { backgroundColor: "#459DF5", color: "#FFF" } }, [
              h("span", {}, label),
            ]);
          },
        },
        {
          title: "星期二",
          align: "center",
          render: (h, params) => {
            let label = params.row.times[1].count;
            return h("div", { style: { backgroundColor: "#459DF5", color: "#FFF" } }, [
              h("span", {}, label),
            ]);
          },
        },
        {
          title: "星期三",
          align: "center",
          render: (h, params) => {
            let label = params.row.times[2].count;
            return h("div", { style: { backgroundColor: "#459DF5", color: "#FFF" } }, [
              h("span", {}, label),
            ]);
          },
        },
        {
          title: "星期四",
          align: "center",
          render: (h, params) => {
            let label = params.row.times[3].count;
            return h("div", { style: { backgroundColor: "#459DF5", color: "#FFF" } }, [
              h("span", {}, label),
            ]);
          },
        },
        {
          title: "星期五",
          align: "center",
          render: (h, params) => {
            let label = params.row.times[4].count;
            return h("div", { style: { backgroundColor: "#459DF5", color: "#FFF" } }, [
              h("span", {}, label),
            ]);
          },
        },
        {
          title: "星期六",
          align: "center",
          render: (h, params) => {
            let label = params.row.times[5].count;
            return h("div", { style: { backgroundColor: "#459DF5", color: "#FFF" } }, [
              h("span", {}, label),
            ]);
          },
        },
        {
          title: "星期日",
          align: "center",
          render: (h, params) => {
            let label = params.row.times[6].count;
            return h("div", { style: { backgroundColor: "#459DF5", color: "#FFF" } }, [
              h("span", {}, label),
            ]);
          },
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      detailRow: {}, //查看数据
      refuseFlag: false, // 拒绝弹窗
      remarks: "", // 拒绝原因
      consultFlag: 0, // 关闭线上按钮 0关闭，1启用
      registerFlag: 0, // 关闭线下按钮 0关闭，1启用
    };
  },
  watch: {
    refuseFlag(val) {
      if (!val) this.remarks = "";
    },
  },
  methods: {
    // 分页 改变页码
    changePage(v) {
      this.searchForm.page = v;
      this.getData();
    },
    // 分页 改变页数
    changerows(v) {
      this.searchForm.rows = v;
      this.searchForm.page = 1;
      this.getData();
    },
    // 搜索
    handleSearch() {
      this.searchForm.page = 1;
      this.searchForm.rows = 10;
      this.getData();
    },
    // 按钮
    btnDom(h, type = null, label = "", method, params, ghost = false) {
      return h(
        "Button",
        {
          props: { type, size: "small", ghost },
          style: { marginRight: "5px" },
          on: {
            click: () => {
              this[method](params.row);
            },
          },
        },
        label
      );
    },
    // 关闭线上/线下服务
    offService(v) {
      let formData = new FormData();
      formData.append("expertId", this.detailRow.expertId);
      if (v == "on") {
        // 线上
        API_Consult.postTurnOffOnline(formData).then((res) => {
          if (res.success) {
            this.$Message.success("已关闭线上服务");
            this.detailFlag = false;
            this.getData();
          }
        });
      } else {
        // 线下
        API_Consult.postTurnOffline(formData).then((res) => {
          if (res.success) {
            this.$Message.success("已关闭线下服务");
            this.detailFlag = false;
            this.getData();
          } else if ((res.code = "99999")) {
            this.$Modal.confirm({
              title: "强制关闭",
              content: "<p>" + res.message + "</p>",
              onOk: () => {
                API_Consult.postForceCloseRegister(formData).then((res) => {
                  if (res.success) {
                    this.$Message.success("已关闭线下服务");
                    this.detailFlag = false;
                    this.getData();
                  }
                });
              },
            });
          }
        });
        //
      }
    },
    // 获取专家状态
    getStatus(id) {
      let formData = new FormData();
      formData.append("expertId", this.detailRow.expertId);
      API_Consult.postExpertStatus(formData).then((res) => {
        if (res.success) {
          this.consultFlag = res.result.consultOpen;
          this.registerFlag = res.result.registerOpen;
        }
      });
    },
    // 审核通过
    approved() {
      this.$Modal.confirm({
        title: "确认审核",
        content: "<p>确认通过审核吗？</p>",
        onOk: () => {
          API_Consult.postExamineYes(this.detailRow.id).then((res) => {
            if (res.success) {
              this.$Message.success("已通过");
              this.detailFlag = false;
              this.getData();
            }
          });
        },
      });
    },
    //审核不通过
    refuse() {
      this.refuseFlag = true;
    },
    // 提交审核拒绝
    submitRefuse() {
      let params = {
        id: this.detailRow.id,
        remarks: this.remarks,
      };
      API_Consult.postExamineNo(params).then((res) => {
        if (res.success) {
          this.$Message.success("已拒绝");
          this.refuseFlag = false;
          this.detailFlag = false;
          this.getData();
        }
      });
    },
    // 审核与详情
    handleView(v) {
      let row = {
        title: v.status ? "详情" : "审核",
        status: v.status ? (v.status == 1 ? "通过" : "不通过") : "待审核",
        realName: v.dto.realName,
        mobile: v.dto.mobile,
        idCard: v.dto.idCard,
        registerPrice: v.dto.registerPrice,
        consultPrice: v.dto.consultPrice,
        list: v.dto.list.length ? v.dto.list : [],
        id: v.id,
        expertId: v.expertId,
      };
      this.detailRow = Object.assign({}, row);
      this.getStatus(v.expertId);
      this.detailFlag = true;
    },
    //查询人员列表
    getData() {
      this.loading = true;
      API_Consult.postExaminePage(this.searchForm)
        .then((res) => {
          if (res.success) {
            this.data = res.result.rows;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.modal-info {
  p::before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 14px;
    vertical-align: top;
    border-radius: 2px;
    margin-right: 20px;
    background-color: #1989fa;
  }
  .modal-row {
    display: flex;
    line-height: 35px;
    padding: 0 20px;
    > div:first-child {
      width: 90px;
      color: #777777;
    }
    > div:last-child {
      flex: 1;
    }
  }
  .modal-row2 {
    line-height: 35px;
    padding: 0 20px;
    > div:first-child {
      width: 160px;
      color: #777777;
    }
  }
  .divider {
    margin: 20px;
    border-bottom: 1px solid #e4e4e4;
  }
}
</style>
